<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>充值商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../static/x-admin/css/font.css">
    <link rel="stylesheet" href="../static/x-admin/css/xadmin.css">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="../static/x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/x-admin/js/xadmin.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.5.1.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>

<body>
    <div class="layui-card">
{{/*        <div class="layui-card-header"></div>*/}}
        <div class="layui-card-body">
            <table id="demo" lay-filter="test"></table>


            <script type="text/html" id="toolbarHead">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="create-group"><i class="layui-icon layui-icon-add-1"></i>创建分组</button>
                    <button class="layui-btn layui-btn-sm" lay-event="flush"><i class="layui-icon layui-icon-refresh-3"></i></button>
                </div>
            </script>


            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <div class="layui-btn layui-btn-normal" lay-event="recharge-url"><i class="layui-icon layui-icon-link">充值</i></div>
                    <div class="layui-btn layui-btn-sm" lay-event="edit-group"><i class="layui-icon layui-icon-edit"></i> 编辑</div>
                    <div class="layui-btn layui-btn-danger" lay-event="delete-group"><i class="layui-icon layui-icon-delete"></i>删除</div>
                </div>
            </script>

            <script>
                layui.use('table', function () {
                    let table = layui.table;
                    table.render({
                        elem: "#demo"
                        ,height: 500
                        ,url: '/static/data/group.json' //数据接口
                        ,page: true //开启分页
                        ,limits: [10, 20, 30, 50, 100, 200]
                        ,cols: [[ //表头
                            {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                            ,{field: 'groupname', title: '分组名称'}
                            ,{field: 'createtime', title: '创建时间', sort: true}
                            ,{field: 'updatetime', title: '修改时间', sort:true}
                            ,{fixed: 'right', title: "操作", width:240, align:'center', toolbar: '#toolbarDemo'}
                        ]]
                        ,toolbar: "#toolbarHead"
                    });

                    table.on('toolbar(test)', function (data) {
                        let event = data.event;

                        if ("create-group" === event) {
                            layer.prompt({
                                formType:2,
                                title: "输入分组的名称",
                                area:['180px', '30px'],
                                btnAlign:'c'
                            }, function (value, index, elem) {
                                // 做分组的修改内容
                                layer.close(index);
                            })
                        }
                    });

                    // 监听行工具事件
                    table.on('tool(test)', function (data) {
                        let event = data.event;
                        if ("recharge-url" === event) {
                            location.href = "https://www.taobao.com";
                        } else if ("edit-group" === event) {
                            layer.msg("请做编辑逻辑的代码");
                        } else if ("delete-group" === event) {
                            layer.confirm("是否要删除该行？", {
                                btn:["YES", "NO"]
                            }, function () {
                                layer.msg("做删除代码的逻辑");
                            }, function () {
                                return false;
                            })
                        }
                    })
                })
            </script>
        </div>
    </div>

</body>

<script>

</script>

</html>